<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      JS事件循环机制：一个异步代码执行机制
      具体流程：
        JS引擎主线程将全局所有代码放入执行栈中执行，从上到下依次执行，同步代码依次执行
        异步代码：
          - 比如定时器，将定时器时间和回调函数交给浏览器定时器管理分线程去处理，主线程继续执行剩下代码
            浏览器定时器管理分线程会开始计时，一旦到点就会将回调函数添加到回调队列中去
          - 比如DOM事件，将DOM事件交给浏览器DOM事件管理分线程去处理，主线程继续执行剩下代码
            浏览器DOM事件管理分线程就会绑定事件，一旦事件将来触发，会将回调函数添加到回调队列中去
        直到主线程执行完全局所有代码，就会开启事件循环（event loop）
        事件循环就会遍历回调队列，依次取出回调函数，同步执行回调函数，直到执行完所有回调函数，又会开启下一次事件循环
    
      宏任务和微任务：浏览器将异步任务的执行优先级进行划分，执行优先级高是微任务，执行优先级低是宏任务

      微任务：
        promise.then/catch/finally() 
        async await
        MutationObserver
      宏任务
        定时器回调函数
        DOM事件回调函数
        ajax回调函数

      JS主线程开启事件循环，执行回调队列中回调函数时，先执行微任务队列中回调函数，执行完所有微任务队列中回调函数
      在去执行宏任务队列中回调函数，执行完第一个宏任务队列中回调函数，就立即执行微任务队列中回调函数
      执行完所有微任务队列中回调函数，在去下一个执行宏任务队列中回调函数

      先执行所有微任务，在执行一个宏任务，在执行所有微任务，在执行一个宏任务...
   -->
  </body>
</html>
